<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p ref="p">{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <hr>
        <p>
            {{zhang.name}}----{{zhang.age}}---{{zhang.info.height}}
        </p>
        <p>
            <button @click="zhang.age++">age++</button>
            <br>
            <button @click="zhang.info.height++">height++</button>
        </p>
    </div>
</body>
<script>
    let {createApp,nextTick} = Vue;
    let {ref,reactive,readonly,computed,watch,watchEffect,watchPostEffect} = Vue;
    let {effectScope} = Vue;

    // watchEffect()
    // 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

    var app = createApp({
        
        setup(props) {

            let count = ref(100);  /// ref对象
            // console.log(count);

            let addCount = ()=>{
                count.value ++;
            }

            // zhang ->代理对象(响应对象)
            let zhang = reactive({// 目标对象
                name:"张三",
                age:18,
                info:{
                    height:173,
                    weight:65
                }
            });  // new Proxy(data,{get,set})
            
            let p = ref();

            // watchEffect()
            // 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。


            // effectScope() 创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。

            let scope = effectScope();

            scope.run(()=>{
                console.log("effect作用域中的代码开始执行",count.value);

                let doubleCount = computed(()=>count.value * 2);

                watch(doubleCount,(newVal,oldVal)=>{
                    console.log("double发生改变",newVal,oldVal);
                })

            })

            // scope.stop();

            


            return {
                // 键名: 传递出去的数据名 方法名  计算属性
                count:count,
                addCount,
                zhang,
                p,
            }
            
        },
        beforeMount() {
            console.log("beforeMount");
        },
        mounted() {
            console.log("mounted");
            // console.log("this",this);
        },
        watch:{
            // "zhang":function(){},
            // "zhang.age":function(){},
        }
        
    })

    app.mount("#app");








</script>
</html>